<template>
<div>
  <BookInfo :info='info'></BookInfo>
  <CommentList :comments="comments"></CommentList>
  <div class="comment" v-if="showAdd">
    <textarea v-model="comment"
              class="textarea"
              :maxlength="100"
              placeholder="请输入图书短评">
    </textarea>
    <div class="localtion">
      地理位置:
      <switch color="#EA5A49" :checked="localtion" @change="getGeo"></switch>
      <span class="text-primary">{{localtion}}</span>
    </div>
    <div class="phone">
      手机型号:
      <switch color="#EA5A49" :checked="phone" @change="getPhone"></switch>
      <span class="text-primary">{{phone}}</span>
    </div>
    <button class="btn" @click="addComment">
      评论
    </button>
  </div>
  <div v-else class="text-footer">
    未登录或者已经评论过啦
  </div>
  <button open-type="share" class="btn">转发给好友</button>
</div>
</template>
<script>
import {get, post, showModal} from '@/util'
import BookInfo from '@/components/BookInfo'
import CommentList from '@/components/CommentList'
export default{
  components: {
    BookInfo, CommentList
  },
  data: function () {
    return {
      userinfo: {},
      bookid: '',
      info: {},
      comment: '',
      localtion: '',
      phone: '',
      comments: [],
      openid: ''
    }
  },
  computed: {
    showAdd () {
      // 没登录
      if (!this.userinfo) {
        return false
      }
      // 评论页面里面查到有自己的openid
      if (this.comments.filter(v => v.openid === this.openid).length) {
        return false
      }
      return true
    }
  },
  methods: {
    async getDetail () {
      const info = await get('/weapp/bookdetail', {id: this.bookid})
      wx.setNavigationBarTitle({
        title: info.title
      })
      this.info = info
      console.log(info)
    },
    async getComments () {
      const comments = await get('/weapp/commentlist', {bookid: this.bookid})
      this.comments = comments.list || []
    },
    getGeo (e) {
      // GTO8afQCmfAS9TGttX1uw0UgGG3cz86E
      const ak = 'GTO8afQCmfAS9TGttX1uw0UgGG3cz86E'
      let url = 'http://api.map.baidu.com/geocoder/v2/'
      if (e.target.value) {
        wx.getLocation({
          success: geo => {
            wx.request({
              url,
              data: {
                ak,
                localtion: `${geo.latitude},${geo.longitude}`,
                output: 'json'
              },
              success: res => {
                if (res.data.status === 0) {
                  this.localtion = res.data.result.addressComponent.city
                } else {
                  this.localtion = '未知地点'
                }
              }
            })
            console.log(geo)
          }
        })
      } else {
        this.localtion = ''
      }
    },
    getPhone (e) {
      if (e.target.value) {
        const phoneInfo = wx.getSystemInfoSync()
        this.phone = phoneInfo.model
      } else {
        this.phone = ''
      }
    },
    async addComment () {
      // 评论内容，手机型号，地理位置，图书id，用户的openid
      if (!this.comment) {
        return
      }
      const data = {
        openid: this.openid,
        bookid: this.bookid,
        comment: this.comment,
        phone: this.phone,
        location: this.localtion
      }
      try {
        await post('/weapp/addcomment', data)
        this.comment = ''
        this.getComments()
      } catch (e) {
        showModal('失败', e.msg)
      }
      console.log(data)
    }
  },
  mounted () {
    this.bookid = this.$root.$mp.query.id
    this.getDetail()
    this.getComments()
    wx.showShareMenu()
    const userinfo = wx.getStorageSync('userinfo')
    const openid = wx.getStorageSync('openid')
    if (userinfo && openid) {
      this.userinfo = userinfo
      this.openid = openid
    }
  }
}
</script>
<style lang='scss'>
.comment{
  margin-top: 10px;
  .textarea{
    width:730rpx;
    height:200rpx;
    background: #eee;
    padding: 10rpx;
  }
  .localtion{
    margin-top: 10px;
    padding: 5px 10px;
  }
  .phone{
    margin-top: 10px;
    padding: 5px 10px;
  }
}
</style>
